import ProTable, {ActionType} from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';
import {Button, Image, message, Popconfirm, Switch, Table} from "antd";
import {delSeckill, seckillPut, spikeGoods} from '@/services/ant-design-pro/marketing'
import {PlusOutlined} from "@ant-design/icons";
import {useRef, useState} from "react";
import GetGoods from "@/pages/Marketing/components/GetGoods";



const Goods = () => {
  const [modalVisit,setModalVisit] = useState(false)
  const actionRef = useRef<ActionType>()
  const submit = (values) => {
    console.log(values)
    setModalVisit(false)
    actionRef.current?.reload()
  }


  const columns = [
    {
      dataIndex: 'product_id',
      width: 100,
      title: '商品ID',
      search: false,
      align: 'center',
    },
    {
      title: '商品图片',
      key: 'pic',
      valueType: 'image',
      align: 'center',
      search: false,
      render: (_,record)=>{
        return (
          <Image
            width={50}
            src={record.recommend_image}
          />
        );
      }
    },
    {
      title: '活动标题',
      dataIndex: 'title',
      align: 'center',
    },
    {
      title: '活动简介',
      dataIndex: 'introduction',
      align: 'center',
      search: false,
    },
    {
      title: '原价',
      dataIndex: 'original_price',
      align: 'center',
      search: false,
    },
    {
      title: '秒杀价',
      dataIndex: 'price',
      align: 'center',
      width: 100,
      search: false,

    },
    {
      title: '限量',
      dataIndex: 'quota_show',
      search: false,
    },
    {
      title: '限量剩余',
      dataIndex: 'quota',
      search: false,
      align: 'center',
    },
    {
      title: '活动状态',
      dataIndex: 'status',
      valueType: 'select',
      align: 'center',
      valueEnum: {
        noCompleted: '未开始',
        haveInHand: '进行中',
        completed: '已结束'
      }
    },
    {
      title: '结束时间',
      dataIndex: 'stop_time',
      align: 'center',
      valueType: 'dateTime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      filters: true,
      onFilter: true,
      search: false,
      align: 'center',
      valueType: 'select',
      render: (_,record) => {
        return (
          <Switch
            defaultChecked={record.status}
            checkedChildren='上架'
            unCheckedChildren="下架"
            onChange={async (state)=>{
              seckillPut(record.id,{
                status: state ? 1 : 0
              }).then(()=> {
                message.success('操作成功！')
                actionRef.current.reload()
              })
            }}
          />
        )
      }
    },
    {
      title: '操作',
      valueType: 'option',
      width: 200,
      fixed: 'right',
      align: 'center',
      render: (_,record) => [
        <a href="">编辑</a>,
        <a onClick={()=>{}}> 复制 </a>,
        <Popconfirm
          title="确定要删除发布的优惠券吗？"
          onConfirm={()=>{
            delSeckill(record.id).then(()=>{
              message.success('删除成功');
              actionRef.current.reload();
            })
          }}
          onCancel={()=>{
            message.success('已取消');
          }}
          okText="确定"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>
      ],
    },
  ];


  return (
    <PageContainer
      header={{
        breadcrumb: {},
      }}
    >

      <ProTable
        actionRef={actionRef}
        rowSelection={{
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
        columns={columns}
        request={async (params={}) => {

          let {data,meta} =  await spikeGoods({...params})
          return{
            data,
            success:true,
            total:meta.pagination.total
          }
        }}
        editable={{
          type: 'multiple',
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        scroll={{ x: 1800 }}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        pagination={{
          pageSize: 5,
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button
            type="primary"
            onClick={() => {
              setModalVisit(true)
            }}
            icon={<PlusOutlined />}
          >
            添加秒杀商品
          </Button>
        ]}
      />
      <GetGoods
        isModalVisible={modalVisit}
        handleOk={submit}
        handleCancel={()=>{
          setModalVisit(false)
        }}
      />

    </PageContainer>
  );
};

export default Goods;
